<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选项卡</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <style>
 	        *{ 
 	        	margin:0; 
 	            padding:0;
 	        }
 	        ul{
  	            list-style: none;
 	        }
 	        img{
 	        	width: 450px;
 	        	height: 300px;
 	        	position: relative;
 	        	top: 25px;
 	        }
 	        .aa{
  	            width: 600px;
  	            margin: 0 auto;
 	        }
 	        .aa .yy{
  	            height: 30px;
  	            width: 600px; 
 	        }
 	        .aa .yy ul li{
 	            float: left;
  	            width: 99px;
  	            text-align: center;
  	            line-height: 30px;
 	        }
 	        .aa .yy ul li:last-child{
 	            border-right:none;
  	            width: 100px;
 	        }
 	        .aa .yy ul li.on{
 	           color: orange;
 	        }
 	        .aa .bkm > div{
  	            width: 500px;
 	            height: 350px;
 	            border: 1px solid #DDDDDD;
 	            display: none;
 	            text-align: center;
 	            background-color:whitesmoke;
 	        }
 	        .aa .bkm > div:first-child{
  	            display: block;
 	        }
 	    </style>
    </head>
    <body>
        <div class="aa">
            <div class="yy">
                <ul>
                    <li class="on">选项1</li>
                    <li>选项2</li>
                    <li>选项3</li>
                    <li>选项4</li>
                    <li>选项5</li>
                </ul>
            </div>
            <div class="bkm">
                <div><img src="img/1.jpg" ></div>
                <div><img src="img/2.jpg"></div>
                <div><img src="img/3.jpg"></div>
                <div><img src="img/4.jpg"></div>
                <div><img src="img/5.jpg"></div>
            </div>
        </div>
        <script>
 	        $(function(){
                $(".yy ul li").click(function(){
                    $(this).addClass("on").siblings().removeClass("on"); 
                    var index=$(this).index(); 
                    $(".bkm > div").eq(index).show().siblings().hide();
                });
            });
         </script>
    </body>
</html>